<template>
  <div class="score-grid" ref="gridRoot" @mouseleave="showTips = false">
    <div class="tips" v-show="showTips" :style="tipsStyle" @mouseenter="moveInfo" v-html="tips"></div>
    <div class="row" v-for="(item, index) in scoreArray" :key="index">
      <div
          :class="{score: true, allow: score != null, 'not-allow': score == null}"
          v-for="(score, jndex) in item"
          :key="`${index}-${jndex}`"
          :style="numToStyle(score)"
          @click="score != null ? showDetail(index) : null"
          @mouseover="showInfo($event, index, jndex)"
          @mouseout="hideInfo"
      />
    </div>
  </div>
</template>

<script>
import config from "@/config";

const colors = config.SCD_COLORS;
const symbols = config.SCD_SYMBOLS;

export default {
  name: 'ScoreGrid',
  props: {
    scoreArray: {
      type: Array,
      required: true,
    },
    mode: {
      type: String,
      default: '颜色', // 可选为 颜色、符号
    },
    // 纵向类型 ACC RMSE BIAS
    colType: {
      type: String,
      required: true,
    },
    // 横向类型 HGT TMP u v w
    rowType: {
      type: String,
      required: true,
    },
    timeSeries: {
      type: Array,
      default: () => [24, 48, 72, 96, 120, 144, 168, 192, 216, 240],
    },
    levels: {
      type: Array,
      default: () => [1000, 850, 700, 500, 250, 100, 70, 50, 10, 5, 3, 1],
    },
    // 在左边展示tips，在鼠标靠近右边时应该在左边展示，避免tips被右边的选项卡覆盖
    tipsLeft: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      showTips: false,
      floatLeft: 0,
      floatTop: 0,
      timer: null,
      tips: '',
    }
  },
  mounted() {

  },
  methods: {
    showDetail(row) {
      const level = this.levels[row];
      const data = {
        metric: this.colType,
        variable: this.rowType.toLowerCase()[0],
        level: level,
      }
      this.$emit('showDetail', data);
    },
    showInfo(e, row, col) {
      this.floatTop = e.layerY;
      if (this.tipsLeft) {
        this.floatLeft = e.layerX - 100;
      } else {
        this.floatLeft = e.layerX + 20;
      }
      this.showTips = true;
      const time = this.timeSeries[col];
      const level = this.levels[row];
      this.tips = `time: ${time}h<br>level: ${level}hPa`;
      clearTimeout(this.timer);
    },
    hideInfo() {
      if (this.timer !== null) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.showTips = false;
      }, 500)
    },
    moveInfo() {
      if (this.tipsLeft) {
        this.floatLeft -= 100;
      } else {
        this.floatLeft += 100;
      }
    },
  },
  computed: {
    numToStyle(num) {
      return (num) => {
        if (num == null) {
          return {};
        }
        const idx = parseInt(num)+3;
        if(this.mode === '颜色') {
          return {
            'background-color': colors[idx],
          };
        } else {
          return {
            'background-image': `url(${symbols[idx]})`,
          };
        }
      }
    },
    tipsStyle() {
      return {
        left: this.floatLeft + 'px',
        top: this.floatTop + 'px',
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.score-grid {
  display: flex;
  flex-direction: column;

  .tips {
    position: absolute;
    background-color: #666666;
    color: #FFFFFF;
    line-height: 1.5em;
    padding: 0.2em 0.5em;
    border-radius: 0.3em;
    transition: all ease 0.3s;
    cursor: default;
    white-space:nowrap;
    z-index: 1000;
    text-align: left;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5)
  }

  .row {
    flex: 1;
    display: flex;
    .score {
      flex: 1;
      height: 1em;
      margin: 1px;
      //border-radius: 3px;
      cursor: pointer;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
      box-sizing: border-box;
      border: 2px solid rgba(0,0,0,0);
    }
    .allow {
      cursor: pointer;
      &:hover {
        border: 2px solid #000;
      }
    }
    .not-allow {
      cursor: not-allowed;
      &:hover {
        border: 2px solid rgba(0,0,0,0);
      }
    }
  }
}

</style>